<template>
  <el-menu :default-active="active"
           class="layout-menu"
           menu-trigger="click"
           background-color="#f6f6f6"
           :collapse="isCollapse"
           @select="handleSelect">
    <template v-for="(item,index) in menu">
      <el-menu-item v-if="!item.children"
                    :index="item.key"
                    :key="index">
        <i :class="item.icon"
           v-if="item.icon"></i>
        <span slot="title">{{item.value}}</span>
      </el-menu-item>
      <el-submenu v-else
                  :index="item.key"
                  :key="index">
        <template slot="title">
          <i :class="item.icon"
             v-if="item.icon"></i>
          <span>{{item.value}}</span>
        </template>
        <el-menu-item v-for="(m,i) in item.children"
                      :index="item.key + '/' + m.key"
                      :key='i'><template slot="title">
            <i :class="m.icon"
               v-if="m.icon"></i>
            <span>{{m.value}}</span>
          </template>
        </el-menu-item>
      </el-submenu>
    </template>
  </el-menu>
</template>
<script>
export default {
  props: {
    isCollapse: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      menu: [
        {
          key: '/',
          value: '首页',
          icon: 'el-icon-s-home'
        }, {
          key: '/user',
          value: '用户管理',
          icon: 'el-icon-s-custom'
        }, {
          key: '/cate',
          value: '分类管理',
          icon: 'el-icon-menu'
        }, {
          key: '/tag',
          value: '标签管理',
          icon: 'el-icon-news'
        }, {
          key: '/topic',
          value: '内容管理',
          icon: 'el-icon-folder',
          children: [
            {
              key: '',
              value: '文章管理',
              icon: 'el-icon-document'
            },
            {
              key: 'comments',
              value: '评论管理',
              icon: 'el-icon-document'
            },
            {
                key: 'books',
                value: '文档管理',
                icon: 'el-icon-document'
            }
          ]
        }, {
          key: '/link',
          value: '友链管理',
          icon: 'el-icon-paperclip',
        }, {
          key: '/banner',
          value: '轮播管理',
          icon: 'el-icon-picture-outline',
        }, {
          key: '/project',
          value: '项目管理',
          icon: 'el-icon-s-finance',
        }, {
          key: '/music',
          value: '歌曲管理',
          icon: 'el-icon-video-play',
          children: [
            {
              key: 'menu',
              value: '歌单管理',
              icon: 'el-icon-document'
            },
            {
              key: 'song',
              value: '曲库管理',
              icon: 'el-icon-document'
            }
          ]
        }, {
          key: '/setting',
          value: '设置管理',
          icon: 'el-icon-setting',
          children: [
            {
              key: 'basis',
              value: '基础设置',
              icon: 'el-icon-document'
            },
            {
              key: 'module',
              value: '模块设置',
              icon: 'el-icon-document'
            },
            {
              key: 'personal',
              value: '个人设置',
              icon: 'el-icon-document'
            },
            {
              key: 'about',
              value: '关于我设置',
              icon: 'el-icon-document'
            }
          ]
        }, {
          key: '/log',
          value: '日志管理',
          icon: 'el-icon-tickets',
          children: [
            {
              key: 'login',
              value: '登录日志',
              icon: 'el-icon-document'
            },
            {
              key: 'behavior',
              value: '行为日志',
              icon: 'el-icon-document'
            },
            {
              key: 'task',
              value: '脚本日志',
              icon: 'el-icon-document'
            },
            {
              key: 'queue',
              value: '队列日志',
              icon: 'el-icon-document'
            },
            {
              key: 'request',
              value: '请求日志',
              icon: 'el-icon-document'
            }
          ]
        }
      ]
    }
  },
  computed: {
    active () {
      return this.$route.path
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      if (this.$router.currentRoute.path === key) {
        return
      }
      this.$router.push({ path: key })
    }
  }
}
</script>
<style scoped lang="scss">
.layout-menu {
  position: fixed;
  top: 60px;
  bottom: 0;
  text-align: left;
  overflow-x: hidden;
  width: 225px;
}
</style>
